<template>

  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="courseId"  placeholder="Please input" style="width: 300px;" class="filter-item"  />
      <el-button style="width: 100px" class="filter-item" type="primary" icon="el-icon-search" @click="searchId(courseId)">Search</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit">Add</el-button>
    </div>

    <el-table

      :data="list"

      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="courseId" width="150" prop="courseId"/>

      <el-table-column align="center" label="courseName" width="150">
      <template slot-scope="scope">
        {{ scope.row.courseName }}
      </template>
      </el-table-column>

      <el-table-column align="center" label="courseTeacher" width="150">
        <template slot-scope="scope">
          {{ scope.row.courseTeacher }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="credit" width="150">
        <template slot-scope="scope">
          {{ scope.row.credit }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="coursePlace" width="150">
        <template slot-scope="scope">
          {{ scope.row.coursePlace }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="courseTime" width="150">
        <template slot-scope="scope">
          {{ scope.row.courseTime }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="300"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editCI(scope.row)" class="el-icon-edit" round>  Edit</el-button>
          <el-button size="mini" type="danger" @click="deleteCI(scope.$index, scope.row)" class="el-icon-delete" round>  Delete</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>

  import { delTableRow } from "../../../api/table";
  import { getList } from "../../../api/table";
  import { searchList } from "../../../api/table";

  export default {
      filters: {
        statusFilter(status) {
          const statusMap = {
            published: 'success',
            draft: 'gray',
            deleted: 'danger'
          }
          return statusMap[status]
        }
      },
    data() {
      return {
        list: [
          {
            'courseId': 3,
            'courseName': '高等数学',
            'credit': 5,
            'courseTeacher': '刘小明',
            'coursePlace': '2号组团楼',
            'courseTime':'第一到15周',
            'stuNumber': 71
          }
        ],

        name:'',
        courseId:''
      }
    },

    created() {
      this.fetchData()
    },
    difyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
      this.searchId()
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    methods: {
      searchId(courseId){
        var vm = this;
        //console.log(typeof (courseId));
          searchList(undefined, Number(courseId)).then(res => {
            console.log(res);
            vm.list = [];
            var a = vm.list.push(JSON.parse(res));
          //vm.list = res;
           console.log(a);
           console.log(this.list)
        })
      },
        editCI(row){
          this.$router.push("/editCourseInformation/index?row.courseId")
        },
        deleteCI(idx,row){
          console.log("索引",idx);
          console.log("数据", row.courseId);
          delTableRow(row.courseId).then((res) => {
          console.log(res)
        })
      alert("删除成功！");
      },
      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content)
          vm.list = res.content
        })

      },
    }
  }
</script>
